<template>
    <div class="myFollow-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>我的消息</BreadcrumbItem>
        </Breadcrumb>
        <!-- 如果数据为空时两个tab栏分别显示 -->
        <!-- <a-empty style="padding-top:70px;"></a-empty> -->
        <!-- 如果数据不为空时显示 -->
        <div class="myFollow-info">
            <Tabs value="name1">
                <!-- 私信列表 -->
                <TabPane label="私信" name="name1">
                    <!-- 消息为空时显示 -->
                    <div class="hasMsg" v-if="msgList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <!-- 消息不为空时显示 -->
                    <div class="hasMsg" v-else>
                        <div class="top-info">
                            <span>未读消息：{{msgNotCount}}</span>
                        </div>
                        <div class="private" v-for="(item,i) in msgList" :key="i">
                            <!-- 显示接收者（避免消息列表是自己） -->
                            <div class="private-item" v-if="item.pmFriend==item.pmReceiver">
                                <div class="private-left">
                                    <router-link :to="'/userInfo/' + item.pmFriend"><img :src="item.receiverAvatar" alt=""></router-link>
                                    <div class="private-info">
                                        <router-link :to="'/userInfo/' + item.pmFriend" class="goods-title">{{item.receiverName}}
                                        <Badge :count="item.msgCount"></Badge></router-link>
                                        <p class="msg-content">{{item.pmContent}}</p>
                                    </div>
                                </div>
                                <div class="private-right">
                                    <span class="time">{{item.pmTime | dataFormat}}</span>
                                    <span>
                                        <router-link v-if="item.pmGid" :to="'/addPrivateMsg/' + item.pmFriend + '/' + item.pmGid">回复</router-link>
                                        <router-link v-if="item.pmWgid" :to="'/addWantPrivateMsg/' + item.pmFriend + '/' + item.pmWgid">回复</router-link>
                                        <span class="line-span"></span>
                                        <a-popconfirm
                                            title="确认删除？"
                                            @confirm="confirm(item.pmFriend)"
                                            okText="Yes"
                                            cancelText="No">
                                            <a href="javascript:void(0)"><Icon type="md-trash" /></a>
                                        </a-popconfirm>
                                    </span>
                                </div>
                            </div>
                            <!-- 显示发送者 -->
                            <div class="private-item" v-else>
                                <div class="private-left">
                                    <router-link :to="'/userInfo/' + item.pmFriend"><img :src="item.senderAvatar" alt=""></router-link>
                                    <div class="private-info">
                                        <router-link :to="'/userInfo/' + item.pmFriend" class="goods-title">{{item.senderName}}
                                        <Badge :count="item.msgCount"></Badge></router-link>
                                        <p class="msg-content">{{item.pmContent}}</p>
                                    </div>
                                </div>
                                <div class="private-right">
                                    <span class="time">{{item.pmTime | dataFormat}}</span>
                                    <span>
                                        <router-link v-if="item.pmGid" :to="'/addPrivateMsg/' + item.pmFriend + '/' + item.pmGid">回复</router-link>
                                        <router-link v-if="item.pmWgid" :to="'/addWantPrivateMsg/' + item.pmFriend + '/' + item.pmWgid">回复</router-link>
                                        <span class="line-span"></span>
                                        <a-popconfirm
                                            title="确认删除？"
                                            @confirm="confirm(item.pmFriend)"
                                            okText="Yes"
                                            cancelText="No">
                                            <a href="javascript:void(0)"><Icon type="md-trash" /></a>
                                        </a-popconfirm>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <!-- 系统通知列表 -->
                <TabPane label="系统通知" name="name2">
                    <!-- 系统通知为空时显示 -->
                    <div class="hasNotice" v-if="noticeList==''&&notNoticeList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <!-- 系统通知不为空时显示 -->
                    <div class="hasNotice" v-else>
                        <div class="top-info">
                            <span>未读消息：{{noticeNotCount}}</span>
                            <div>
                                <a href="javascript:void(0);" @click="updateAllRead">全部标记为已读</a>
                                <span class="line"></span>
                                <a-popconfirm
                                    title="确认清空？"
                                    @confirm="deleteAll"
                                    okText="Yes"
                                    cancelText="No">
                                    <a href="javascript:void(0)">清空所有消息</a>
                                </a-popconfirm>
                            </div>
                        </div>
                        <!-- 未读通知列表 -->
                        <div class="myinfo-item" v-for="item in notNoticeList" :key="item.nId">
                            <div class="msg-info">
                                <span class="msg-unread"></span>
                                <span class="msg-type">系统</span>
                                <span class="msg-title" @click="updateRead(item.nuId, item.nuNId, item.nuUid)">{{item.notice.nTitle}}</span>
                                <span class="msg-option">
                                    <span class="date">{{item.notice.nPubTime | dataFormat}}</span>
                                    <a href="javascript:void(0);" @click="deleteById(item.nuId)" class="delete"><Icon type="md-trash" /></a>
                                </span>
                            </div>
                            <div class="drop-content">
                                <span>{{item.notice.nContent}}</span>
                            </div>
                        </div>
                        <!-- 已读通知列表 -->
                        <div class="myinfo-item" v-for="(item,i) in noticeList" :key="i">
                            <div class="msg-info">
                                <span class="msg-type">系统</span>
                                <span class="msg-title">{{item.notice.nTitle}}</span>
                                <span class="msg-option">
                                    <span class="date">{{item.notice.nPubTime | dataFormat}}</span>
                                    <a href="javascript:void(0);" @click="deleteById(item.nuId)" class="delete"><Icon type="md-trash" /></a>
                                </span>
                            </div>
                            <div class="drop-content">
                                <span>{{item.notice.nContent}}</span>
                            </div>
                        </div>
                        <div class="page-all">
                            <Page :total="allPages.total" :page-size="pageSize" :current="pageNum" @on-change="changePage"  />
                        </div>
                    </div>
                </TabPane>
                <!-- 宝贝留言列表 -->
                <TabPane label="宝贝留言" name="name3">
                    <!-- 宝贝留言为空时显示 -->
                    <div class="hasComment" v-if="goodsComment==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="hasComment" v-else>
                      <div class="myinfo-item" v-for="item in goodsComment" :key="item.gcId">
                          <div class="msg-info">
                              <span class="msg-type">宝贝</span>
                              <span class="msg-title"><router-link :to="'/userInfo/' + item.users.uId">{{item.users.uName}}</router-link></span>
                          </div>
                          <div class="comment-content">
                              <div class="comment-left">
                                  <router-link :to="'/goodsInfo/' + item.goods.gId"><img :src="item.mainPic" alt=""></router-link>
                                  <div class="comment-title">
                                      <p><router-link :to="'/goodsInfo/' + item.goods.gId">{{item.goods.gTitle}}</router-link></p>
                                      <p>{{item.gcContent}}</p>
                                  </div>
                              </div>
                              <div class="comment-right">
                                  <a href="javascript:void(0)" @click.prevent="deleteCommentById(item.gcId)"><Icon type="md-trash" /></a>
                                  <span>{{item.gcTime | dataFormat}}</span>
                              </div>
                          </div>
                      </div>
                      <div class="page-all">
                          <Page :total="allTwoPages.total" :page-size="pageSize" :current="pageNumTwo" @on-change="changeTwoPage"  />
                      </div>
                    </div>
                </TabPane>
                <!-- 求购留言列表 -->
                <TabPane label="求购留言" name="name4">
                    <!-- 求购留言为空时显示 -->
                    <div class="hasWantComment" v-if="wantGoodsComment==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="hasWantComment" v-else>
                      <div class="myinfo-item" v-for="item in wantGoodsComment" :key="item.wgcId">
                          <div class="msg-info">
                              <span class="msg-type">求购</span>
                              <span class="msg-title"><router-link :to="'/userInfo/' + item.users.uId">{{item.users.uName}}</router-link></span>
                          </div>
                          <div class="comment-content">
                              <div class="comment-left">
                                  <router-link :to="'/wantGoodsInfo/' + item.wantGoods.wgId"><img :src="item.mainPic" alt=""></router-link>
                                  <div class="comment-title">
                                      <p><router-link :to="'/wantGoodsInfo/' + item.wantGoods.wgId">{{item.wantGoods.wgTitle}}</router-link></p>
                                      <p>{{item.wgcContent}}</p>
                                  </div>
                              </div>
                              <div class="comment-right">
                                  <a href="javascript:void(0)" @click.prevent="deleteWantGoodsCommentById(item.wgcId)"><Icon type="md-trash" /></a>
                                  <span>{{item.wgcTime | dataFormat}}</span>
                              </div>
                          </div>
                      </div>
                      <div class="page-all">
                          <Page :total="allThreePages.total" :page-size="pageSize" :current="pageNumThree" @on-change="changeThreePage"  />
                      </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
  name: 'myInfo',
  data () {
    return {
      id: JSON.parse(localStorage.getItem('user')).uId,
      msgList: [], // 私信列表
      msgNotCount: 0, // 未读私信数
      noticeList: [], // 系统通知已读列表
      pageSize: 4, // 每页显示多少条
      allPages: [], // 存放分页2的信息
      pageNum: 1, // 默认展示第一页数据
      allTwoPages: [], // 存放分页1的信息
      pageNumTwo: 1, // 默认展示第一页数据
      allThreePages: [], // 存放分页1的信息
      pageNumThree: 1, // 默认展示第一页数据
      notNoticeList: [], // 系统通知未读列表
      noticeNotCount: 0, // 未读系统通知数
      goodsComment: [], // 宝贝留言列表
      wantGoodsComment: [] // 求购留言列表
    }
  },
  created () {
    this.findAllByUser()
    this.findReadByUid()
    this.findNotReadByUid()
    this.findGoodsComment()
    this.findWantGoodsComment()
  },
  methods: {
    // 根据用户的发送者id(pmUser)查看该用户与其他用户的私信列表
    findAllByUser () {
      this.$axios({
        url: 'privateMsg/findAllByUser',
        method: 'get',
        params: {
          pmUser: this.id,
          pageNo: this.pageNumFour,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.msgList = res.data.list
          this.msgList.forEach(item => {
            this.msgNotCount += item.msgCount
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 提示框确认-删除私信列表页面两指定用户间的整个会话
    confirm (id) {
      this.$axios({
        url: 'privateMsg/deleteAll/',
        method: 'get',
        params: {
          pmUser: this.id,
          pmFriend: id
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findAllByUser()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id查看该用户收到的已读系统通知列表
    findReadByUid () {
      this.$axios({
        url: 'notice/findReadByUid',
        method: 'get',
        params: {
          uId: this.id,
          pageNo: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.noticeList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.findReadByUid()
    },
    // 根据用户id查看该用户收到的未读系统通知列表
    findNotReadByUid () {
      this.$axios({
        url: 'notice/findNotReadByUid',
        method: 'get',
        params: {
          uId: this.id
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.notNoticeList = res.data.list
          this.noticeNotCount = this.notNoticeList.length
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 用户修改某条系统通知阅读状态为已读
    updateRead (nuId, nuNId, nuUid) {
      this.$axios({
        url: 'notice/updateRead',
        method: 'get',
        params: {
          nuId,
          nuNId,
          nuUid
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findReadByUid()
          this.findNotReadByUid()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 用户根据通知用户id删除此条通知
    deleteById (id) {
      this.$axios({
        url: 'notice/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findReadByUid()
          this.findNotReadByUid()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 将登录用户下的未读通知全部标记为已读
    updateAllRead () {
      this.$axios({
        url: 'notice/updateAllRead',
        method: 'get',
        params: {
          nuUid: this.id
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findReadByUid()
          this.findNotReadByUid()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 将登录用户下的所有系统通知消息清空
    deleteAll () {
      this.$axios({
        url: 'notice/deleteAll/',
        method: 'get',
        params: {
          uId: this.id
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findReadByUid()
          this.findNotReadByUid()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id查询该用户发布的所有宝贝评论
    findGoodsComment () {
      this.$axios({
        url: 'goodsComment/findByUserId/' + this.id,
        method: 'get',
        params: {
          pageNo: this.pageNumTwo,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodsComment = res.data.pageInfo.list
          this.allTwoPages = res.data.pageInfo
          this.goodsComment.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.goods.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变页码
    changeTwoPage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumTwo = index
      this.findGoodsComment()
    },
    // 根据评论id删除此评论(如果该评论是父评论，删除此父评论的同时，也会删除相关的子评论哦)
    deleteCommentById (id) {
      this.$axios({
        url: 'goodsComment/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findGoodsComment()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id查询该用户发布的所有求购评论
    findWantGoodsComment () {
      this.$axios({
        url: 'wantGoodsComment/findByUserId/' + this.id,
        method: 'get',
        params: {
          pageNo: this.pageNumThree,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.wantGoodsComment = res.data.pageInfo.list
          this.allThreePages = res.data.pageInfo
          this.wantGoodsComment.forEach(item => {
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wantGoods.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变页码
    changeThreePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumThree = index
      this.findWantGoodsComment()
    },
    // 根据评论id删除此求购评论(如果该评论是父评论，删除此父评论的同时，也会删除相关的子评论哦)
    deleteWantGoodsCommentById (id) {
      this.$axios({
        url: 'wantGoodsComment/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findWantGoodsComment()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.myFollow-container {
    min-height: 480px;
}
.myFollow-info {
    margin-top: 50px;
}
.top-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.line {
    display: inline-block;
    height: 12px;
    margin: 2px 12px;
    border-right: 1px solid #979797;
}
.msg-info {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.msg-unread {
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #ca0c16;
    border-radius: 50%;
    margin-right: 5px;
}
.msg-type {
    display: inline-block;
    width: 36px;
    height: 20px;
    color: #4d4d4d;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    margin-right: 5px;
}
.msg-title {
    width:75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #4d4d4d;
    display: inline-block;
    font-size: 14px;
}
.msg-option {
    width:20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.date {
    color:#6b6b6b;
    font-size: 12px;
}
.delete {
    color: #4d4d4d;
}
.drop-content {
    padding: 10px;
    background-color: #f7f7f7;
    font-size: 14px;
    color: #4d4d4d;
    margin:10px 0;
}
.top2-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}
.comment-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    margin-bottom: 10px;
}
.comment-left {
    width: 79%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.comment-left img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.comment-title {
    width: calc(100% - 50px);
}
.comment-title p {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.comment-right {
    width: 17%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.comment-right a {
    color: #4d4d4d;
}
.private-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.private-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.private-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 10px;
}
.private-info p {
    margin-bottom: 0;
    font-size: 11px;
}
.private-info {
    max-width:95%;
}
.private-info>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 15px;
}
.msg-content {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.private-right>span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.line-span {
    display: inline-block;
    height: 8px;
    margin: 2px 12px;
    border-right: 1px solid #979797;
}
</style>
